今天要來看網頁的 DOM 概念。雖然開發 .NET 應用程式不太會直接操作 DOM，但瞭解概念有助於開發更多互動的網頁程式。

DOM 是 Document Object Model 的縮寫，用於將 HTML 等語法的標籤描述成物件，這些物件最終會形成樹狀結構。

DOM 介紹

• DOM 可以分成四個部分：
  1. Document: 整份 HTML 文件。
  2. Element: HTML 元素，例如按鈕 <button id="test">測試</button>。
  3. Text: 一般文字，例如按鈕上顯示的文字<button id="test">**測試**</button>。
  4. Attribute: 屬性，例如按鈕的啟用屬性 <button id="test" **disabled**>測試</button>。
• 可以使用 JavaScript 等語法存取 DOM ，但 DOM 並不是 JavaScript 的一部分。
• 事件可以加入至 DOM 的元素內，如 HTML:

<button onclick="myFunction()">Click me</button>

或 JavaScript

button.addEventListener("click", myFunction);

。

DOM 的常用 API

• getElementById(): 根據元素的 ID 取得元素。
• getElementsByClassName(): 根據元素的 Class Name 取得元素集合 (HTMLCollection)。

(實務上，由於用 jQuery 操作 DOM 更加便利，可以捨棄許多的 DOM API 寫法。)

參考資料

• HTML DOM Event Object
• Day03-深入理解網頁架構：DOM - iT 邦幫忙
• 個人 Github Pages